<script setup>
/**
 * 文案仿写, 左侧表单组件
 */
import {
  ref,
  onMounted,
  toRefs,
  computed,
  reactive,
  watch,
  nextTick,
  onUnmounted,
  watchEffect,
  inject,
} from "vue";
import {
  IeOutlined,
  VideoCameraAddOutlined,
  AudioOutlined,
  BulbOutlined,
} from "@ant-design/icons-vue";

// 字数上限
import {max_text_length} from '@/common/utils/richTextProcessing.js'


// 处理 sse返回的文本内容
import { parseTextToObject } from "@/common/utils/richTextProcessing.js";

import { streamFetch } from "@/common/utils/streamFetch.js";

import request from "@/common/utils/request";

import utils from "@/common/utils/utils.js";

import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const vipVisible = ref(false)

// 音频转文字组件
import ViewAudioModel from "@/views/shotstack/components/ViewAudioModel/ViewAudioModel.vue";

// 链接转音频组件
import videoextraction from "@/views/shotstack/AiCreation/components/videoextraction.vue";

const audioDialog = ref(null);

import { isEmpty } from "@/common/utils/is.js";

// 导入文案弹窗
import InspirationbankDialog from "@/views/shotstack/components/InspirationbankDialog/index.vue";
const InspirationbankDialogRef = ref(null);
// 选择音频组件
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
import { message, Modal } from "ant-design-vue";
import { nanoid } from "nanoid";
import { useRoute } from "vue-router";
const route = useRoute();

import store from "@/store";

const emit = defineEmits(["setRightList:list"]);

// 通知父组件, 传递给右侧列表
const setList = (list) => {
  if (!list.length) {
    // 传递空的 loding 数据
    const arr = [...new Array(formState.num)].map((ele) => {
      return {
        loding: true,
        checked: false,
        titleEdit: false,
        content: "",
        title: "",
        id: nanoid(),
      };
    });
    emit("setRightList", arr);
    return;
  }
  emit("setRightList", list);
};

// 数据收集
const formRef = ref(null);
const formState = reactive({
  // 行业类型, 这里固定传通用
  industry: 4,
  // 生成类型(默认全局镜头文本)
  type: 1,
  // 产品或公司
  product_name: "",
  // 卖点
  selling_points: "",
  // 文案风格
  script_type: null,
  // 参考文案
  content: "",
  // 生成数量(标题数量)
  num: 2,
  // 文案字数
  limit_type: "",
  // 文案语言
  language:''
});

const isone_num = inject("isone_num")

// 状态维护
const state = reactive({
  // 选择素材弹窗开关
  addVisible: false,
  // 选择的音频素材
  start_upload_data: {},
  // 文案字数 选择列表
  limit_typeList: [],
  // 音频拆分识别组件的loding状态
  closeedLoading: false,
  // 是否取消轮询
  cancelLoding: false,
  audioLoading: false,

  // 文案风格
  options: [],
  // 文案语言
  languagesList: [],
  //  仿写按钮loding
  submitLoding: false,
  // 仿写返回的数据结果
  list: [],
  // 视频转文字链接
  video_url: "",
  // 视频转文字 切换开关
  // video_url_creat: false,
  // 链接提取文案loding
  getTextLoading: false,
  // 换一篇需要用到的任务id
  imitation_id: "",
  // 链接获取音频弹窗开关
  video_visivle: false,
});

// 文案风格, 底部描述
const textStyleDes = computed(() => {
  const flattenedList = state.options.flatMap(item => item.list);
  console.log(formState.script_type, 'formState.script_type');

  if (Array.isArray(formState.script_type)) {    
    const find = flattenedList.find(ele => ele.type == formState.script_type?.[1])
    console.log(find,'找的的');
    if (find) {
      return find?.des
    }
    return ''
  }
  return  ''
});

// 暴露给父组件 imitation_id
const exposeImitation_id = () => {
  return state.imitation_id;
};

onMounted(() => {
  getTextStyleList();
  getLimit_typeList();
  getLanguagesList()

  // 从其他入口进入, 导入到参考文案
  if (route.query?.afflatusId) {
    getAfflatusText();
  } else if (route.query?.AIsceneCenterId) {
    getAIsceneCenterText();
  }
});

const getAfflatusText = async () => {
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/inspirationText/detail",
    {
      id: route.query.afflatusId,
    }
  );

  console.log(res, "详情文案");
  if (res?.result?.text) {
    formState.content = res.result.text.slice(0, max_text_length);
    formRef.value.validate("content");
  }
};

const getAIsceneCenterText = async () => {
  const res = await request.get(
    "/work_ai",
    "/user/socialMedia/campaignTaskLog/info",
    {
      id: route.query.AIsceneCenterId,
    }
  );

  console.log(res, "即将导入的ai文案创作文案");
  if (res?.result?.content) {
    formState.content = res.result.content.slice(0, max_text_length);
    formRef.value.validate("content");
  }
};

// 获取文案风格数据
const getTextStyleList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/scriptType");
  console.log(res, "文案风格数据");
  state.options = res.result;
  const item = res.result[0];
  // 设置默认值
  formState.script_type = [item.type, item.list[0].type];
};

// 获取字数选择列表
const getLimit_typeList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/wordLimit");
  console.log(res, "ai文案字数");
  state.limit_typeList = res.result;
  // word_limit_50_75
  const find = res.result.find((ele) => ele.value == "word_limit_75_150");
  formState.limit_type = !!find ? find.value : res.result[0].value;
};

// 获取语言选择列表
const getLanguagesList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/languages");
  console.log(res, "文案语言");
  state.languagesList = res.result;
  // word_limit_50_75
  const find = state.languagesList.find((ele) => ele.label == "中文");
  formState.language = !!find ? find.value : res.result[0].value;
};

// 音频获取文案
const audioGetText = () => {
  handleModel("audio");
};

// 选择音频文件回调
const closeChooseMaterial = (data) => {
  if (!isEmpty(data)) {
    // if (data !== undefined) {
    state.start_upload_data = {
      id: data.id,
      url: data.material_url, // 音频路径
      name: data.material_name, // 音频名字
      isOK: true, // 是否转码 成功
      material_duration: data.material_duration,
      media_id: data?.oss_media_id || "",
    };
    audioDialog.value && audioDialog.value.showModal(data);
  }
  state.addVisible = false;
};

const timerId = ref(null);
// 音频字幕的数据  获取及处理
const initData = async (data) => {
  // 取消了轮询
  if (state.cancelLoding) {
    clearTimeout(timerId.value);
    state.cancelLoding = false;
    return;
  }
  try {
    const res = await request.get(
      "/work_ai",
      `/user/shotstack/parseAudioToTxt/get`,
      {
        TaskId: data.id,
      }
    );
    // debugger;
    if (res.result.Data.StatusStr !== "success") {
      // 继续轮训
      timerId.value = setTimeout(() => {
        initData(data);
        return;
      }, 3000);
    } else {
      console.log(res.result, "音频转文字");
      // state.closeedLoading = true;
      if (res.result.captions.captionsShow.length == 0) {
        message.warning("未识别到音频, 请重试!");
        return;
      }
      const text = res.result.captions.captionsShow
        .map((ele) => ele.FinalSentence)
        .join(",")
        .slice(0, max_text_length);

      formState.content = text;
      formRef.value.validate("content");

      // 关闭弹窗的按钮loading
      audioDialog.value.updateSaveLoading(false);
      // 关闭弹窗内的弹窗
      audioDialog.value.closeLodingDialog();
      // 关闭弹窗本身
      audioDialog.value.closeModal();
      state.closeedLoading = true;
    }
  } catch (error) {
    message.error("音频转换失败!");
    audioDialog.value.updateSaveLoading(false);
    audioDialog.value.closeLodingDialog();
    audioDialog.value.closeModal();

    state.closeedLoading = true;
  }
};

const handleModel = (type) => {
  const isOk = () => {
    if (type == "audio") {
      state.addVisible = true;
    }
    if (type == "linggan") {
      InspirationbankDialogRef.value.showModal();
    }
    if (type == "link") {
      state.video_visivle = true;
    }
  };
  if (formState.content != "") {
    Modal.confirm({
      title: `操作提示`,
      cancelText: "取消",
      okText: "继续",
      content: `检测到您已经有文案，导入后会直接替换，是否继续`,
      zIndex: 1003,
      onOk() {
        isOk();
      },
      onCancel() { },
    });
  } else {
    isOk();
  }
};

// 链接提取文案
const linkCreatText = () => {
  handleModel("link");
};

const abortSignal = new AbortController();

// 数组分组
const splitArrayIntoGroups = (arr, chunkNum) => {
  const result = []; // 用于存放嵌套数组

  for (let i = 0; i < arr.length; i += chunkNum) {
    // 使用 slice 方法切割数组，将每 chunkNum 个元素作为一组推入结果数组
    const group = arr.slice(i, i + chunkNum);
    result.push(group);
  }

  return result;
}

// 一键仿写
const handleSubmit = async () => {
  // const res = parseTextToObject(
  //   `undefined##
  // -标题：肌肤弹性的秘密
  // -副标题：无可替代的保养法
  // -内容：你想知道她的肌肤为何如此弹嫩吗？一款神奇的护肤产品揭示了这个秘密。它不仅仅是补水，更是深入肌底，重塑肌肤屏障，改善干燥状况。富含天然成分，能够全面修复，让每一寸肌肤都感受到前所未有的滋润与弹性。这种效果绝非一朝一夕，而是持之以恒的坚持，让每一次护肤都变成一次享 处理的结果`
  // );

  // console.log(res, "处理的结果");

  // return;
  await formRef.value.validate();


  try {
    // 查看用户的点数是否足够消耗
    await utils.aiTextGet()
    try {
      // 消耗规则
      const rule = await utils.consumptionPointRule()
      // 获取提示
      const content = utils.ruleTips({ res: rule, key: "ai_text_point" })
      // 弹出提示
      await utils.md({ content })
      // 弹窗确认消耗
    } catch (error) {
      return
    }
  } catch (error) {
    // 打开充值, 接着打开点数购买
    vipVisible.value = true
    vipModalRef.value && vipModalRef.value.openBuyVisible()
    return
  }


  state.submitLoding = true;
  // 存放空的 loding数据
  state.list = [...new Array(formState.num)].map((ele) => {
    return {
      loding: true,
      checked: false,
      titleEdit: false,
      content: "",
      title: "",
      id: nanoid(),
      zhanwei: true,
    };
  });
  setList(state.list);
  // emit("setRightList", []);
  //  num: formState.num,
  let params = {
    // 生成数量
    num: 1,
    // 参考文案
    content: formState.content,
    // 文案风格
    script_type: formState.script_type[1],
    // 行业类型
    industry: formState.industry,
    // 生成类型
    type: formState.type,
    // 文案字数
    limit_type: formState.limit_type,
    // 文案语言
    language: formState.language,
    // 是否是文案仿写
    is_text_imitation: 1,
    imitation_data: {
      product_name: formState.product_name,
      selling_points: formState.selling_points,
      script_type: formState.script_type,
      content: formState.content,
    },
    user_token: utils.getToken(),
    org_id: utils.getOrgId(),
    team_id: store.state.user.teamId,
    // is_polling: 1, // 轮询
    // refresh: 0, // 是否刷新
  };
  // 获取任务id
  const imitationAdd = await request.post(
    "/work_ai",
    "/user/shotstack/scripttext/imitation/add",
    params
  );
  console.log(imitationAdd, "imitationAdd");
  // 存储到全局
  state.imitation_id = imitationAdd.imitation_id;

  // 生成异步数组
  let promiseArr = [];
  for (let index = 0; index < formState.num; index++) {
    // debugger;
    promiseArr.push(() => setTextItem(params));
  }

  let chunkNum = 5
  const PromiseArrChunk = splitArrayIntoGroups(promiseArr, chunkNum)

  for (let i = 0; i < PromiseArrChunk.length; i++) {
    await Promise.all(PromiseArrChunk[i].map(ele => ele())).then(async () => {
      console.log('一组成功');
    });
  }

  const list = state.list.filter(ele => ele?.zhanwei == false || ele?.zhanwei == undefined)

  const clearLen = state.list - list.length

  if (clearLen > 0) {
    state.list = list
    setList(state.list)
    message.success(`生成结束, 已自动去除${clearLen}条失败数据`)
  }

  state.submitLoding = false;
  saveData();

  return;
  let t;
  const getResult = async () => {
    try {
      const res = await request.post(
        "/work_ai",
        "/user/shotstack/scripttext/ai/subtitlesScene",
        params
      );
      console.log(res, "获取到数据");

      if (res.result?.status == "doing") {
        t = setTimeout(() => {
          !params?.task_id && (params.task_id = res.result.task_id);
          getResult();
        }, 3000);
      } else {
        console.log(res.result, "生成视频组数据");
        if (res?.code && res?.code != 1000) {
          // 出意外了
          throw new Error(res?.msg || "生成失败!");
        }

        state.imitation_id = res.result.imitation_id;

        // 存储数据
        state.list = res.result.chat_data.map((ele) => {
          return {
            checked: false,
            loding: false,
            titleEdit: false,
            content: ele.subtitle_text_block.join(""),
            title: ele.title,
            id: ele.id,
          };
        });

        setList(state.list);
        state.submitLoding = false;
      }
    } catch (error) {
      message.error(error?.message);
      clearTimeout(t);
      emit("setRightList", []);
      state.submitLoding = false;
    }
  };
  getResult();
};

// 实时存储当前编辑的项
const setTextItem = async (params) => {
  let id;
  let item;
  let allText;
  return new Promise(async (resolve, reject) => {
    // 调用的时候, 添加到同一组中
    params.imitation_id = state.imitation_id;

    const { responseText } = await streamFetch({
      url: `${request.BASE_URL}/work_ai/user/shotstack/scripttext/imitation`,
      data: params,
      onMessage: (text) => {

        if (utils.isJSONStr(text)) {
          //这里有错误
          let res = JSON.parse(text);
          if (utils.isObject(res) && res.msg) {
            message.error(res.msg);
            reject();
            return;
          }
        }
        allText += text;

        if (!item?.id) {
          item = {
            checked: false,
            loding: true,
            titleEdit: false,
            // id: ele.id,
            // content: ele.subtitle_text_block.join(""),
            // title: ele.title,
          };
          id = nanoid();
          item.id = id;
        }
        // if (!item?.id) {
        //   handleSubmitUtool.is_id = nanoid();
        //   item.id = handleSubmitUtool.is_id;
        // }
        const res = parseTextToObject(allText);
        item.title = res["-标题"];
        item.content = res["-内容"];

        const haveItem = state.list.find((ele) => ele.id == item.id);

        if (haveItem) {
          // 如果有数据, 则直接替换
          for (let key in haveItem) {
            haveItem[key] = item[key];
          }
        } else {
          // 添加一个, 删除一个占位
          state.list.unshift(JSON.parse(JSON.stringify(item)));
          // const zhanweiLIst = state.list.filter((ele) => ele?.zhanwei);
          // zhanweiLIst.length >= 1 &&
          //   zhanweiLIst.unshift({
          //     zhanwei: true,
          //   });
          const index = state.list.findIndex((ele) => ele?.zhanwei);
          index != -1 && state.list.splice(index, 1);
        }
        setList(state.list);
        // console.log(state.list, "即将同步的list");
      },
      abortSignal,
    }).catch((err) => {
      state.submitLoding = false;
      console.log(err?.message, '报错信息');
      const index = state.list.findIndex((ele) => ele?.zhanwei);
      index != -1 && state.list.splice(index, 1);
      message.error(err?.message || '生成出错啦, 请稍后重试')
      setList(state.list);
      reject();
      return {
      responseText: false,
      };
    })
    // 加载完成之后, 关闭此项的loding
    const find = state.list.find((ele) => ele.id == item.id);
    !!find && (find.loding = false);
    setList(state.list);
    resolve();
  });
  // let url =
};

const saveData = async () => {
  const result_content = state.list.map((ele) => {
    return {
      id: ele.id,
      title: ele.title,
      subtitle_text_block: [ele.content],
    };
  });

  // 获取完列表之后 更新服务器的列表数据
  const res = await request.put(
    "/work_ai",
    "/user/shotstack/scripttext/imitation/update",
    {
      result_content,
      imitation_id: state.imitation_id,
    }
  );
};
// 抖音视频提取文案
const textSource = async () => {
  const params = {
    video_url: state.video_url,
  };
  let t = null;
  state.getTextLoading = true;
  try {
    const fn = async () => {
      clearTimeout(t);
      const res = await request.post(
        "/work_ai",
        `/user/shotstack/text/source`,
        params
      );
      if (res.result?.status == "doing") {
        if (!params.task_id && res.result?.task_id) {
          params.task_id = res.result.task_id;
        }
        t = setTimeout(() => {
          fn();
          console.log(res.result, "doing");
        }, 2000);
        console.log(res, "视频转文字");
      } else if (res.result?.status == "success") {
        console.log(res.result, "成功获取了");
        if (!res.result.content.trim())
          message.warning("该视频好像没有文案哦!");
        formState.content = res.result.content.slice(0, max_text_length);
        formRef.value.validate("content");

        state.getTextLoading = false;
        // state.video_url_creat = false;
      } else {
        throw new Error(res.result?.msg || "提取文案失败!");
      }
    };
    await fn();
  } catch (error) {
    message.error(error?.message);
  }
};

// 从灵感库导入文案
const importTextFormLGK = () => {
  handleModel("linggan");
};

// 灵感库返回文案
const getText = (text) => {
  console.log(text, "获得文案啦!!!");
  formState.content = text.slice(0, max_text_length);
  formRef.value.validate("content");

  message.success("导入成功!");
  InspirationbankDialogRef.value.closeModal();
};

// 灵感库导出单项文案
const importUse = (item) => {
  console.log(item, "单项文案");
  formState.content = item.text.slice(0, max_text_length);
  formRef.value.validate("content");

  message.success("导入成功!");
  InspirationbankDialogRef.value.closeModal();
};

// 链接提取文案返回结果
const success_Sub = (data) => {
  console.log(data, " 提取文案结果");

  let t;
  // 开启页面loding状态
  state.getTextLoading = true;

  // 关闭视频提取文字弹窗
  state.video_visivle = false;

  const getText = async () => {
    try {
      t && clearTimeout(t);

      const res = await request.get(
        "/work_ai",
        "/user/shotstack/video/conver/text/detail",
        {
          id: data.id,
        }
      );

      if (res?.code && res?.code != 1000)
        throw new Error(res?.msg || "提取文字失败!");

      const status = res.result.status;
      // 失败了
      if (status == 3) {
        throw new Error(res.result?.status_txt || "提取文字失败!");
      } else if (status == 2) {
        state.getTextLoading = false;
        if (res.result.contents.trim() == "")
          return message.warning("该视频好像没有音频文案哦~");
        // 处理成功了
        console.log(res, "成功了");
        formState.content = res.result.contents.slice(0, max_text_length);
        formRef.value.validate("content");
        message.success("提取成功!");
      } else {
        // 继续轮询
        t = setTimeout(() => {
          getText();
        }, 2500);
      }
      console.log(res, "获取音频结果");
    } catch (error) {
      message.error(error.message);
      state.getTextLoading = false;
    }
  };

  getText();
};

// 文案仿写详情接口
const getWriteDetail = () => {
  request.get('/work_ai', '/user/shotstack/write/detail', { id: Number(route.query.writingId) }).then((res) => {
    formState.content = res.result.material_content
  })
}

watch(
  () => isone_num,
  (val) => {
    if (val) {
      formState.num = 1
    }
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  if (route?.query?.writingId) {
    getWriteDetail()
  }
})

defineExpose({
  exposeImitation_id,
});
</script>

<template>
  <div class="CreatTextImitationForm">
    <div class="form_content">
      <a-form :model="formState" ref="formRef" layout="vertical">
        <a-form-item label="参考文案" name="content" :rules="[{ required: true, message: '请输入参考文案!' }]">
          <div class="textarea_box">
            <a-textarea style="background-color: #fff; border: none; box-shadow: none" v-if="!state.getTextLoading"
              v-model:value="formState.content" showCount :maxlength="max_text_length" :autosize="{
                minRows: 4,
                maxRows: 7,
              }" class="textarea"
              placeholder="您可以复制文案在此粘贴，AI深度学习，一键裂变。您可以输入优质文案视频链接，AI自动提取解析文案，深度学习，一键裂变。您可以上传本地优质文案视频，AI自动提取解析文案，深度学习，一键裂变。50-500字最佳" />

            <template v-else-if="state.getTextLoading">
              <div class="get_text_Loading">
                <div class="get_text_Loading_content">
                  <span class="get_text_lodaing_tip">文案解析中...</span>
                  <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                    '0%': '#108ee9',
                    '100%': '#87d068',
                  }" status="active" />
                </div>
              </div>
            </template>

            <div class="text_btns" v-if="!state.getTextLoading">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>仅支持抖音平台的视频</span>
                </template>
                <a-button type="default" class="btn" @click="linkCreatText">
                  <IeOutlined />链接提取文案
                </a-button>
              </a-tooltip>

              <a-button type="default" class="btn" @click="audioGetText">
                <AudioOutlined /> 音频提取文案
              </a-button>

              <a-button type="default" class="btn" @click="importTextFormLGK">
                <BulbOutlined /> 爆款文案库导入文案
              </a-button>
            </div>
          </div>
        </a-form-item>
<!-- :rules="[{ required: true, message: '请输入产品或公司!' }]" -->
        <a-form-item label="产品或公司" name="product_name" >
          <a-input v-model:value="formState.product_name" allowClear showCount :maxlength="50" placeholder="请输入产品或公司">
          </a-input>
        </a-form-item>
<!-- :rules="[{required: true,message: '请输入该产品的独特卖点!'}]" -->
        <a-form-item label="独特卖点" name="selling_points" >
          <a-textarea v-model:value="formState.selling_points" showCount :maxlength="500" :autosize="{
            minRows: 3,
            maxRows: 6,
          }" placeholder="请输入产品卖点信息" />
          <!-- class="textarea" -->
        </a-form-item>

        <a-form-item label="文案风格" name="script_type" :rules="[
          {
            required: true,
            message: '请选择文案风格!',
          },
        ]">
          <a-cascader style="width: 100%" expand-trigger="hover" :fieldNames="{
            label: 'name',
            value: 'type',
            children: 'list',
          }" v-model:value="formState.script_type" :options="state.options" placeholder="请选择文案风格" />

          <!--  选择的文案风格描述 -->
          <div class="text_dec" v-if="textStyleDes">{{ textStyleDes }}</div>
        </a-form-item>

        <a-form-item style="width: 100%" label="语言" name="language">
          <a-select v-model:value="formState.language" :size="size" style="width: 100%"
            :options="state.languagesList"></a-select>
        </a-form-item>

        <a-form-item style="width: 100%" label="文案字数" name="limit_type">
          <a-select v-model:value="formState.limit_type" :size="size" style="width: 100%"
            :options="state.limit_typeList"></a-select>
        </a-form-item>
        <a-form-item label="生成条数" name="num" :rules="[
          {
            required: true,
            message: '请输入生成条数!',
          },
        ]">
          <a-input-number :disabled="isone_num" v-model:value="formState.num" addon-after="条" :min="1" :max="100" style="width: 155px" />
        </a-form-item>
      </a-form>
    </div>

    <div class="submit_box">
      <a-button type="primary" class="btn" :loading="state.submitLoding" @click="handleSubmit">
        一键仿写
      </a-button>
    </div>
  </div>

  <!-- 选择音频组件 -->
  <ChooseMaterial :isClip="false" material_type="audio" :visible="state.addVisible" @close="closeChooseMaterial" />

  <!-- 音频拆分识别组件 -->
  <ViewAudioModel ref="audioDialog" :start_upload_data="state.start_upload_data" :closeedLoading="state.closeedLoading"
    @update="initData" @cancelLoding="state.cancelLoding = true" @audioLoading="state.audioLoading"
    @ReAdd="audioGetText">
  </ViewAudioModel>

  <!-- 灵感库导入文案 -->
  <InspirationbankDialog ref="InspirationbankDialogRef" @getText="getText" @importUse="importUse" :selectType="'radio'">
  </InspirationbankDialog>

  <!-- 链接提取文案 -->
  <videoextraction :visible="state.video_visivle" @cancel="state.video_visivle = false" @success_Sub="success_Sub">
  </videoextraction>

  <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" ref="vipModalRef" @close="vipVisible = false"></vipModal>
</template>

<style lang="less" scoped>
.CreatTextImitationForm {
  @radius: 8px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 15px;

  .submit_box {
    border-top: 1px solid #cacaca;
    padding: 20px 0 10px 0;

    .btn {
      width: 100%;
    }
  }

  .form_content {
    flex: 1;
    overflow-y: auto;

    // 滚动条消失
    &::-webkit-scrollbar {
      display: none;
    }

    :deep(.ss-form-item-label) {
      font-weight: 600;
    }

    :deep(.ss-form-item) {
      margin-bottom: 25px;
    }

    .text_dec{
      margin-top: 10px;
      font-size: 14px;
      color: #afafaf;
    }

    .textarea_box {
      background-color: #f5f5fc;
      border-radius: @radius;
      padding: 10px;
      // padding-bottom: 65px;
      position: relative;
      display: felx;
      flex-direction: column;
      background: #f5f5fc;

      // :deep(.ss-input-textarea) {
      // textarea {
      // background-color: #fff;
      // border: none !important;
      // box-shadow: none !important; /* 去掉阴影效果 */
      // }
      // }
      :deep(.ss-input) {
        &::-webkit-scrollbar {
          width: 8px;
          /* 滚动条的宽度 */
          height: 10px;
          /* 滚动条的高度，垂直滚动条可能用得上 */
        }
      }

      // 链接提取文案容器
      .video_url_box {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding-bottom: 10px;

        textarea {
          background-color: #fff;
          border: none;
          box-shadow: none;
          /* 去掉阴影效果 */
        }

        .video_url_btns {
          display: flex;
          justify-content: end;
          gap: 10px;
          padding-right: 10px;
        }
      }

      // 提取文案加载中
      .get_text_Loading {
        // height: 100px;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .get_text_Loading_content {
          width: 75%;
          display: flex;
          flex-direction: column;

          .get_text_lodaing_tip {
            font-size: 12px;
            color: #2a3a3a;
          }
        }
      }

      .text_btns {
        // position: absolute;
        // bottom: 10px;
        // left: 10;
        // width: calc(100% - 20px);
        margin-top: 22px;
        gap: 5px;
        display: flex;
        justify-content: space-between;
        // .btn {
        //   width: 50%;
        // }
      }
    }

    .inline_box {
      :deep(.ss-form-item) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .ss-form-item-label {
          padding: 0;
        }

        .ss-form-item-control-input-content {
          display: flex;
          justify-content: end;
        }
      }
    }

    .dynamic_form {

      // display: grid;
      // grid-template-columns: 1fr 1fr;
      // gap: 0px 20px;
      .form_item {
        position: relative;

        .btn_box {
          position: absolute;
          top: -30px;
          right: 0;
          display: flex;
          align-items: center;
          gap: 3px;
          opacity: 0;
          transition: all 0.3s;

          .btn {
            padding: 3px;
          }
        }

        &:hover {
          .btn_box {
            opacity: 1;
          }
        }
      }
    }

    .form_item {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
  }
}
</style>
